<template>
	<div class="main">
		<div class="container">
			<div class="header">
				<div class="title">
					<span>关于“{{$route.params.text}}”的搜索结果</span>
				</div>

				<div class="context">
					<div class="type">
						<div class="typeName">
							<span>电影</span>
						</div>
					</div>
					<ul v-if="movieObj.table0.length">
						<li v-for="item in movieObj.table0" :key="item.EnID" @click="pass(item)">
							<a href="#" class="movie-inner movie-font">
								<div class="movieName movie-inner movie-font">
									{{item.cnName}}
									<span class="movieTime" v-if="item.releaseTime">({{item.releaseTime}})</span>
								</div>

							</a>
						</li>
					</ul>
					<div class="type">
						<div class="typeName">
							<span>影院</span>
						</div>
					</div>
					<ul v-if="movieObj.table3.length">
						<li v-for="item in movieObj.table3" :key="item.EnID" @click="pass(item)">
							<a href="#" class="movie-inner movie-font">
								<div class="movieName movie-inner movie-font">
									{{item.CinemaName}}
								</div>

							</a>
						</li>
					</ul>
					<div class="yuan" v-else>
						<img src='https://ys.endata.cn/img/emptyData.1ee233db.png' alt="">
						<p class="no-info">未查询到相关条件的数据</p>
					</div>

				</div>
			</div>


		</div>

	</div>
</template>
<style scoped>
	ul {
		list-style: none;
	}

	.header .context ul {
		padding: 10px !important;
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
	}

	.header .context .yuan {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
		margin-bottom: 20px !important;
		justify-content: center;
	}

	.header .context .yuan img {
		width: 70px;
	}

	.header .context .yuan>p {
		margin-top: 15px !important;
		font-size: 13px !important;
		color: #656565 !important;
	}

	.header .context ul li {
		box-sizing: border-box;
		width: 25%;
		padding: 5px !important;
	}

	.movie-inner {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		position: relative;
		text-decoration: none;
		outline: 0;
		cursor: pointer;
		padding: 0;
		font-size: 14px;
		font-weight: 500;

	}

	.header .context .movie-font {
		color: #656565;
	}

	.header .context li>a .movieName {
		display: inline-block;
	}

	.header .context li>a .movieTime {
		font-size: 13px !important;
		cursor: pointer !important;
	}

	.context {
		min-height: 100px;
		padding: 15px !important;
	}

	.context .type {
		margin-bottom: 10px !important;
		margin-top: 15px !important;
		display: block;
		height: 1px;
		width: 100%;
		margin: 24px 0;
		background-color: #dcdcdc;
		position: relative;
	}

	.context .type .typeName {
		position: absolute;
		background-color: #fff;
		padding: 0 20px;
		font-weight: 500;
		color: #454647;
		font-size: 14px;
		left: 20px;
		transform: translateY(-50%);
	}

	.context .type .typeName>span {
		font-size: 15px !important;
		font-weight: 700 !important;
	}

	.main {
		background-color: #E5E5E5;
	}

	.container {
		overflow: hidden;
	}

	.header {
		margin: 20px !important;
		color: #454555;
		font-size: 13px;
		padding: 20px !important;
		background: #fff;
		box-shadow: 0 0 8px rgb(0 25 141 / 12%);
		border-radius: 2px;
		margin-bottom: 20px;
	}

	.header .title {
		padding: 0 30px !important;
	}

	.header .title>span {
		font-weight: 700 !important;
		font-size: 18px !important;
		color: #454647 !important;
	}
</style>


<script>
	import {
		GetSearchData
	} from '@/api/search'

	export default {
		watch: {
			$route() { //监听到路由（参数）改变
				// 拿到目标参数 val.query.typeCode 去再次请求数据接口
				this.getSearchData()
			}
		},
		data() {
			return {
				movieObj: {},
			}
		},
		created() {
			this.getSearchData()
		},
		methods: {
			pass(item){
				// console.log("1")
				this.$router.push('/pffx/yppf/'+item.EnID)
				// console.log(item);
			},
			getSearchData() {
				GetSearchData({
					r: 0.953471167425731,
					infotype: 0,
					key: this.$route.params.text,
				}).then(res => {
					// console.log(res.data.data.table0)
					this.movieObj = res.data.data
					// console.log(this.movieObj);
				}).catch(err => {
					console.log(err)
				})
			}
		},
	}
</script>
